<template>
  <div class="main">
    <detail-banner :sightName="detailInfo.sightName"
      :bannerImg="detailInfo.bannerImg"
      :galleryImgs="detailInfo.galleryImgs"/>
    <detail-header :sightName="detailInfo.sightName"/>
    <detail-base-info :baseInfo="detailInfo.baseInfo"/>
    <detail-list :promoteList="detailInfo.promoteList"
      :ticketList="detailInfo.ticketList"/>
  </div>
</template>

<script>
import DetailBanner from './DetailBanner'
import DetailHeader from './DetailHeader'
import DetailBaseInfo from './DetailBaseInfo'
import DetailList from './DetailList'
import axios from 'axios'

export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailBaseInfo,
    DetailList
  },
  data () {
    return {
      detailInfo: {
        sightName: '',
        bannerImg: '',
        galleryImgs: [],
        baseInfo: {},
        promoteList: [],
        ticketList: []
      }
    }
  },
  methods: {
    getDetailInfo () {
      console.log(`get detail info of id:`, this.$route.params.id)
      axios.get('./api/detail.json')
        .then(this.getDetailInfoSucc)
    },
    getDetailInfoSucc (res) {
      res = res.data
      if (res.ret) {
        const data = res.data
        this.detailInfo = data
      }
    }
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .main
    position relative
</style>
